import Vue from 'vue'
import App from './App.vue'
import router from './router'
// 导入全局样式表
import '@/assets/css/global.css'
// 导入字体图标
import '@/assets/fonts/iconfont.css'
// 导入 axios 库
import axios from 'axios'
// 导入 element UI 按需导入的组件库
import './plugins/element.js'
// 树形表格
import TreeTable from 'vue-table-with-tree-grid'
// 基于 Quill 适用于 Vue 的富文本编辑器
import VueQuillEditor from 'vue-quill-editor'
// Quill富文本编辑器样式表
import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme
// 按需导入loading
import { Loading } from 'element-ui'

// 配置请求根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1'

// 声明变量用于存储 Loading 组件的实例对象------------还用于后面关闭loading效果
let loadingInstance = null
let loadingCount = 0
const requestList = []

function startLoading() {
  // 调用 Loading 组件的 service() 方法，创建 Loading 组件实例，并通过 fullscreen 配置项全屏展示 loading 效果
  loadingInstance = Loading.service({
    fullscreen: true,
    text: '加载中……',
    background: 'rgba(0, 0, 0, 0.7)'
  })
}
function endLoading() {
  // 通过调用 Loading 组件实例提供的 close() 方法关闭 Loading 效果
  if (loadingInstance) {
    loadingInstance.close()
  }
}
// 配置请求拦截器
axios.interceptors.request.use(
  (config) => {
    loadingCount++
    // 为请求头对象配置 Token 认证字段------需要授权的 API ，必须在请求头中使用 `Authorization` 字段提供 `token` 令牌
    config.headers.Authorization = window.sessionStorage.getItem('token')
    const timer = setTimeout(() => {
      startLoading()
    }, 300)
    requestList.push({
      timer,
      url: config.url
    })
    return config
  },
  (error) => {
    endLoading()
    return Promise.reject(error)
  }
)

// 配置响应拦截器
axios.interceptors.response.use(
  (res) => {
    loadingCount--
    requestList.forEach((item) => {
      if (res.config.url === item.url) {
        clearTimeout(item.timer)
      }
    })
    if (loadingCount <= 0) {
      endLoading()
    }
    return res
  },
  (error) => {
    endLoading()
    return Promise.reject(error)
  }
)

// 定义格式化时间的全局过滤器
Vue.filter('dateFormat', (date) => {
  const dt = new Date(date)

  const y = dt.getFullYear()
  const m = padZero(dt.getMonth() + 1)
  const d = padZero(dt.getDate())

  const hh = padZero(dt.getHours())
  const mm = padZero(dt.getMinutes())
  const ss = padZero(dt.getSeconds())
  return `${y}-${m}-${d} ${hh}:${mm}:${ss}`
})

function padZero(num) {
  return num > 10 ? num : '0' + num
}

// 将 axios 挂载到 Vue 原型对象身上
Vue.prototype.$http = axios
Vue.component('tree-table', TreeTable)
Vue.use(VueQuillEditor)
Vue.config.productionTip = false

new Vue({
  router,
  render: (h) => h(App)
}).$mount('#app')
